<template>
<div>
  <div id="app">
    <top></top>
    <list></list>
    <display></display>
  </div>
</div>
</template>

<script>
//1.导入需要使用的.vue文件
import top from "./components/Top.vue";
import list from "./components/List.vue";
import display from "./components/Display.vue";
export default {
  name:'App',
  methods: {},
  //2.注册组件
  components: {
    top,
    list,
    display,
  },
};
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    width: 1000px;
    margin: 0 auto;
    border: 1px solid lightgray;
  }

  #top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    border-bottom: none;
    background-color: #f9f9fa;
    /* overflow: auto; */
    margin-bottom: 3px;
  }

  #top img {
    margin: 0 0 0 15px;
    /* max-width: 100%; */
    width: 200px;
    height: 50px;
  }

  #top .shu {
    font-size: 40px;
    color: #eaebef;
  }

  #top .font {
    margin: 0 15px;
    font-size: 25px;
    color: #a1a1a7;
    height: 70px;
    line-height: 70px;
  }

  #top .login {
    flex: 1;
    text-align: right;
    /* margin-right: 80px; */
    height: 70px;
    line-height: 70px;
    font-size: 25px;
    color: #585c64;
    text-decoration: none;
  }

  #top i {
    font-size: 25px;
    line-height: 70px;
  }

  .icon-yingyong {
    margin-right: 15px;
  }

  .shpping {
      margin-top: 3px;
      height: 1000px;
      background-color: #f9f9fa;
      overflow: scroll;
  }
  .shpping::-webkit-scrollbar {
      display: none;
  }
</style>
